<template>
  <div class="app-container">
    <div class="appbar">
      <van-nav-bar
        :title="title ? title : 'vue-h5-app'"
        :right-text="righttext"
        :left-text="lefttext"
        fixed
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
      </van-nav-bar>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Router, useRouter } from 'vue-router'
export default defineComponent({
  name: 'AppContainer',
  props: {
    title: {
      type: String,
      default: ''
    },
    righttext: {
      type: String,
      default: ''
    },
    lefttext: {
      type: String,
      default: ''
    }
  },
  setup(prop, ctx) {
    const router: Router = useRouter()
    //左侧返回按钮
    const onClickLeft = () => {
      router.back()
    }
    //右侧按钮事件
    const onClickRight = () => {
      ctx.emit('click-right')
    }
    return {
      onClickLeft,
      onClickRight
    }
  }
})
</script>
<style lang="scss" scoped>
@import '@assets/style/navvant.scss';
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .appbar {
    height: 44px;
    line-height: 44px;
    .van-nav-bar {
      // background: blue;
    }
  }
  .content {
    flex: 1;
    overflow: auto;
    padding: 4px;
    background: #f2f2f2;
  }
}
</style>
